<template>
  <div class="roll-list">
    <div class="roll-item" v-for='(roll, i) in option' :key='i'>
      <div class="roll-line col-between" >
        <div v-if='roll.dot' class="text-dot" :style="`background: ${dotColor};width: ${size}px;height: ${size}px;line-height: ${size}px;text-align: center;border-radius: 50%;`">
          {{roll.dot}}
        </div>
        <div v-else class="roll-line-dot" :style='`border: 6px solid ${dotColor};`'>
          <slot name='dot' :data='roll'></slot>
        </div>
        <div 
          class="line flex-1" 
          v-if='i != option.length - 1'
          :style='`background: ${lineColor};width:${lineWidth}`'
        ></div>
      </div>
      <div class="roll-content flex-1">
        <div class="content-box" v-if='roll.content'>{{roll.content}}</div>
        <slot name='content' :data='roll' v-else>
        </slot>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'HaRoll',
  props: {
    option: {type: Array, default: () => []},
    lineColor: {type: String, default: '#dbe5f1'},
    lineWidth: {type: String, default: '2px'},
    dotColor: {type: String, default: '#1082FF'},
    size: {type: String, default: '28px'}
  },
  data: () => ({

  }),
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    
  },
}
</script>
<style lang='scss' scoped>
.roll-item{
  display: flex;
}
.roll-line{
  height: unset;
  width: 38px;
  align-items: center;
  .roll-line-dot{
    width: 24px;
    height: 24px;
    background: #FFFFFF;   
    border-radius: 50%; 
  }
  .text-dot{
    border-radius: 50%;    
    font-size: 16px;
    color: #FFFFFF;
  }

}
  .roll-content{
    min-height: 80px;
    line-height: 38px;
    font-size: 14px;
  }
</style>